<template>
  <div class="ntfb" ref="echarts"></div>
</template>

<script>
export default {
  name: 'Ntfb',
  props: {
    dataInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      list: []
    }
  },
  mounted() {
    this.list = this.dataInfo.val18 ? this.dataInfo.val18.split(',') : [0, 0, 0, 0, 0, 0]
    this.getData()
  },
  methods: {
    getData() {
      const option = {
        grid: {
          top: '10%',
          bottom: '5%',
          left: '5%',
          right: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['大名镇', '杨桥镇', '万堤镇', '龙王庙镇', '束馆镇', '金滩镇', '沙圪塔镇', '王村乡'],
          axisLabel: {
            show: true,
            color: '#333',
            fontSize: 10
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            color: '#333',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: ['#333']
            },
            show: true //隐藏
          }
        },

        color: ['#00F2FE'],
        series: [
          {
            data: this.list,
            type: 'bar',
            barWidth: '20',
            itemStyle: {
              color: '#00F2FE'
            }
          }
        ]
      }
      const echarts = this.$echarts.init(this.$refs.echarts)
      echarts.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.ntfb {
  height: 213px;
}
.image {
  height: 60px;
  width: 60px;
}
</style>
